<template>
  <div class="login_body">
    <div class="login_box">
      <div class="login_imgs">
        <div
          class="login_top"
          :class="{ active: fog == 0 }"
          @click="qiehuan(0)"
        >
          登录
        </div>
        <div
          class="login_top"
          :class="{ active: fog == 1 }"
          @click="qiehuan(1)"
        >
          注册
        </div>
      </div>
      <!-- 登录区 -->
      <!-- hide-required-asterisk = true 加入后可以不显示小红星-->
      <el-form
        label-width="60px"
        class="login_user"
        v-show="fog == 1"
        :model="loginForm"
        :rules="loginFormRules"
        :hide-required-asterisk="true"
      >
        <el-form-item label="账号:" prop="phone">
          <el-input
            prefix-icon="iconfont icon-user"
            placeholder="请输入手机号"
            v-model="loginForm.phone"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input
            prefix-icon="iconfont icon-3702mima"
            show-password
            placeholder="请输入密码"
            v-model="loginForm.password"
          ></el-input>
        </el-form-item>
        <p class="login_checkbox">
          <input type="checkbox" id="check" ref="jsk" />
          <label for="check">记住密码</label>
          <a class="login_mima" @click="dialogvs=true"> 忘记密码</a>
        </p>
        <el-form-item class="btns">
          <el-button type="primary" @click="skl">登录</el-button>
        </el-form-item>
      </el-form>
      <!-- 注册号码区 -->
      <el-form
        label-width="60px"
        class="login_user"
        v-show="fog == 0 && fos == 0"
        style="margin-left: 10px"
        :model="loginForm"
        :rules="loginFormRules"
        :hide-required-asterisk="true"
        ref="loginFormRefs"
      >
        <el-form-item label="手机号:" prop="phone">
          <el-input
            prefix-icon="el-icon-phone"
            placeholder="请输入手机号"
            v-model="loginForm.phone"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码:" prop="yzma">
          <!-- prop与loginForm里面的必须保证一致否则会报错 -->
          <el-input
            placeholder="请输入验证码"
            style="width: 200px"
            v-model="loginForm.yzma"
            onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )"
          ></el-input>
          <el-button @click="jinyu" id="times" v-show="!isbin"
            >获取验证码</el-button
          >
          <el-button v-show="isbin" disabled="disabled"
            >{{ shijian }}秒后重新发送</el-button
          >
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="zhuche(0)">下一步</el-button>
        </el-form-item>
      </el-form>
      <!-- 名字和密码区 -->
      <el-form
        label-width="60px"
        :model="loginForm"
        class="login_user"
        v-show="fog == 0 && fos == 1"
        :rules="loginFormRules"
        :hide-required-asterisk="true"
        ref="loginFormRefs"
      >
        <el-form-item label="昵称:" prop="username">
          <el-input
            prefix-icon="iconfont icon-user"
            placeholder="请输入昵称"
            v-model="loginForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input
            prefix-icon="iconfont icon-3702mima"
            show-password
            placeholder="请输入密码"
            v-model="loginForm.password"
          ></el-input>
        </el-form-item>
        <div class="login_checkbox">
          <input type="checkbox" ref="sjk"  />
          <a @click="dialogVisible = true"> 用户须知</a>
        </div>
        <el-form-item class="btns">
          <el-button type="primary" @click="zhuche(1)">立即注册</el-button>
        </el-form-item>
      </el-form>
      <!-- 注册提示 -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <div>
          <h2>这个网站是用github上提供的网易云api</h2>
          <br />
          1.如果你有一个网易云账号，请使用网易云的账号登录即可 <br />
          2.这个网站的前端是个新手，可能优化不是很到位 <br />
          3.注册的手机号码不能与网易云上的手机号码重复，否则会报手机号码已注册的提示<br />
          4.游客访问模式还没学 <br />
          5.建议使用chrome打开网站 <br />
          6.有任何问题可以联系qq:2414992406
        </div>
      </el-dialog>
       <!-- 密码修改 -->
        <el-dialog title="密码修改" :visible.sync="dialogvs" width="30%">
          <el-form
        label-width="80px"
        class="login_user"
        style="margin-left: 10px"
        :model="loginForm"
        :rules="loginFormRules"
        :hide-required-asterisk="true"
        ref="loginFormRefs"
      >
        <el-form-item label="手机号:" prop="phone">
          <el-input
            prefix-icon="el-icon-phone"
            placeholder="请输入手机号"
            v-model="loginForm.phone"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码:" prop="yzma">
          <!-- prop与loginForm里面的必须保证一致否则会报错 -->
          <el-input
            placeholder="请输入验证码"
            style="width: 200px"
            v-model="loginForm.yzma"
            onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )"
          ></el-input>
          <el-button @click="jinyu" id="times" v-show="!isbin"
            >获取验证码</el-button
          >
          <el-button v-show="isbin" disabled="disabled"
            >{{ shijian }}秒后重新发送</el-button
          >
        </el-form-item>
        <el-form-item label="修改密码:" prop="password">
          <el-input
            prefix-icon="iconfont icon-3702mima"
            show-password
            placeholder="请输入密码"
            v-model="loginForm.password"
          ></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="xiugai" style=" float:right">确认</el-button>
        </el-form-item>
      </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { loginyzm, loginyzyzm, loginsjyz, loginresgit ,login} from "@/api";
export default {
  data() {
    var checkphone = (rule, value, cb) => {
      const regemail = /^1[34578]\d{9}$/;
      if (regemail.test(value)) {
        return cb();
      }
      cb(new Error("请输入合法的手机号码"));
    };
    var checkpassword = (rule, value, cb) => {
      const regepassword = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if (regepassword.test(value)) {
        return cb();
      }
      cb(new Error(this.$message.error("请输入包含字母和数字的密码")));
    };
    return {
      fog: 1,
      fos: 0,
      dialogvs:false,
      dialogVisible: false,
      shijian: 61,
      loginForm: {
        phone: "",
        password: "",
        yzma: "",
        username: "",
      },
      loginFormRules: {
        phone: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
          {
            validator: checkphone,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
          },
          {
            validator: checkpassword,

            trigger: "blur",
          },
        ],
        yzma: [
          {
            required: true,
            message: "验证码不能为空",
            trigger: "blur",
          },
          { min: 4, max: 4, message: "请输入四位数的验证码", trigger: "blur" },
        ],
        username: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    shijian() {
      if (this.shijian == 0 || this.shijian == 61) {
        this.shijian = 61;
      } else {
        setTimeout(() => {
          this.shijian--;
        }, 1000);
      }
    },
    fog() {
       let res = JSON.parse(localStorage.getItem('jizhu'))
          if(localStorage.getItem('jizhu')&&this.fog==1){  
          this.loginForm.phone=res[0],
          this.loginForm.password=res[1]
          this.$refs.jsk.checked=true
          
       }else{
         this.loginForm.phone = "";
        this.loginForm.password = "";
        this.loginForm.yzma = "";
        this.loginForm.username = "";
       }
      
    },
  },
  methods: {
    //登录注册状态页面切换
    qiehuan(m) {
      if (m == 0) {
        this.fog = 1;
        this.fos = 0;
      } else {
        this.fog = 0;
      }
    },
    async zhuche(m) {
      
      if (m == 0) {
        //this.fos = 1;
        const resd = await loginsjyz(this.loginForm.phone);
        if (resd.exist == 1) {
          this.$message.error("该账号已被注册");
        } else {
          const res = await loginyzyzm(
            this.loginForm.phone,
            this.loginForm.yzma
          );
          console.log(res);
          if (res !==200 ) {
            this.$message.error(res.message);
          } else {
            this.fos = 1;
          }
        }
        // 注册按键功能区
      } else {
        this.$refs.loginFormRefs.validate( async(valid) => {
          if (!valid) return;
          if(!this.$refs.sjk.checked){
          this.$message.error('未勾选用户须知')
        }else{
          const res = await loginresgit(
            this.loginForm.phone,
            this.loginForm.password,
            this.loginForm.yzma,
            this.loginForm.username
          );
          if (res.code == 200) {
            this.$message.success("注册成功");
            this.fos = 0;
            this.fog = 1;
          } else {
            this.$message.error(res.message);
          }}
        });
      }
       
    
    },
    //验证码操作
    async jinyu() {
      const res = await loginyzm(this.loginForm.phone);
      console.log(res);
      if (res.code == 200) {
        this.$message.success("发送成功");
        this.shijian--;
      } else {
        this.$message.error("发送失败");
      }
    },
   async skl() {
      if (!this.loginForm.phone) {
        this.$message.error("输入的手机号码不能为空");
        return
      } else if (!this.loginForm.password) {
        this.$message.error("输入的密码不能为空");
        return
      }
         const res = await login(this.loginForm.phone,this.loginForm.password)
          if(res.code==200){ 
              if(this.$refs.jsk.checked){
                 localStorage.setItem('jizhu',JSON.stringify([this.loginForm.phone,this.loginForm.password]))
              }else{
                 localStorage.removeItem('jizhu')
              }
          localStorage.setItem('cookie',res.cookie);
          localStorage.setItem('avatar',res.profile.avatarUrl);
          localStorage.setItem('uid',res.profile.userId)
            this.$router.push('/home')
            this.$message.success({
              duration:1000,
              message:'登录成功'
            })
          }else{
            this.$message.error(res.msg)
          }
           
    },
  async  xiugai(){
      if (!this.loginForm.phone) {
        this.$message.error("输入的手机号码不能为空");
        return
      }else if(!this.loginForm.yzma){
                this.$message.error("输入的验证码不能为空");
                 return
      } else if (!this.loginForm.password) {
           this.$message.error("输入的密码不能为空");
        return
      }
       const res = await loginresgit(
            this.loginForm.phone,
            this.loginForm.password,
            this.loginForm.yzma,
           
          );
          if (res.code == 200) {
            this.$message.success("修改成功");
            this.fos = 0;
            this.fog = 1;
          } else {
            this.$message.error(res.message);
          }
       
    }
   
  },
  computed: {
    isbin() {
      return this.shijian != 61;
    },
  },
  mounted(){
         let res = JSON.parse(localStorage.getItem('jizhu'))
       if(localStorage.getItem('jizhu')){
         this.loginForm.phone=res[0],
         this.loginForm.password=res[1]
         this.$refs.jsk.checked=true
       }
  }
  };
</script>

<style lang='less' scoped>
.login_body {
  background: url(./images/login1.jpg) no-repeat;
  background-size: 100% 100%; /*将背景图撑满全屏*/
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.login_box {
  background-color: #ffffff;
  height: 300px;
  width: 450px;
  margin: 150px auto;
  box-shadow: 3px 3px 3px gray;
  .login_imgs {
    width: 100%;
    height: 50px;
    font-size: 26px;

    .login_top {
      float: left;
      width: 50%;
      height: 45px;
      font-size: 20px;
      text-align: center;
      padding-top: 18px;
      cursor: pointer;
      &.active {
        background-color: #e6e6fa;
      }
    }
  }

  .login_user {
    margin-right: 20px;
    margin-top: 30px;

    /deep/ input::-webkit-outer-spin-button,
    /deep/ input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
    }
    /deep/ input[type="number"] {
      -moz-appearance: textfield !important;
    }
    .btns {
      float: right;
      margin-top: 20px;
    }
    .login_checkbox {
      position: relative;
      background-color: #ffff;
      margin-left: 60px;
      margin-top: -18px;
      a {
        position: absolute;
        cursor: pointer;
        top: -1px;
      }
      label {
        position: absolute;
        cursor: pointer;
        top: -1px;
      }
      .login_mima {
        right: 0px;
      }

      a:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>